<template>
    <!-- <div class="textBox">
        <h1>斗破</h1>
        <h2>斗罗</h2>
        <h3>遮天</h3>
        <div>
        </div>
    </div> -->
    <p>{{ person }}</p>
    <button @click="person.age++">age++</button>
    <p>{{ count }}</p>
    <button @click="count++">count++</button>
</template>

<script setup >
import { reactive, ref, watch, watchEffect } from 'vue';

const person = ref({
    name:'张三',
    age:20
});
const count = ref(0);

watchEffect(()=>{
    console.log(count.value);
})
// watch(person,()=>{
//     console.log('person发生变化');
    
// })
// watch(person,()=>{
//     console.log('person发生变化');
    
// },{once:true})
// watch(count,()=>{
//     console.log('count发生变化');
    
// },{once:true})
// watch(person,()=>{
//     console.log('person发生变化');
    
// },{immediate:true})
// watch(person,()=>{
//     console.log('person发生变化');
    
// },{deep:true})
// watch(()=>person.age,()=>{
//     console.log('person.age发生变化');
// })
</script>

<style scoped lang="scss">

.textBox{
h1{
    color: red;
}
h2{
    color: green;
}
h3{
    color: blue;
}
div{
    width: 200px - 20px;
    height: 200px - 20px;
    padding: 10px;
    background-color: cadetblue;
}
}
</style>